<script setup lang="ts">
import type { VxeGridProps } from 'vxe-table'

import { SearchTable } from '@fl/components'

import RecordsDetail from './records-detail.vue'

const showRecordsDetail = ref<boolean>(false)
const dateRange = ref<string[]>([])

const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})

// #region Table
const isTableLoading = computed(() => false)
const tableData = ref<any[]>([
    {
        applyTime: '2024-09-10 23:59:59',
        avatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.p9N4LqKEfaJ2AewVtiYTiAAAAA?rs=1&pid=ImgDetMain',
        contactTime: '2024-09-13 23:59:59',
        id: '0101',
        name: '张三',
        phone: '1888888888',
    },
])

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'id', title: '用户ID' },
        { field: 'avatar', slots: { default: 'avatar' }, title: '头像' },
        { field: 'name', title: '名称' },
        { field: 'phone', title: '手机号' },
        { field: 'contactTime', title: '最近联系时间' },
        { field: 'applyTime', title: '申请时间' },
        { field: 'operation', slots: { default: 'operation' }, title: '操作' },
    ],
})
// #endregion

// #region UI Listener
function onCheckDetailBtnClick(row: any) {
    showRecordsDetail.value = true
}
// #endregion
</script>

<template>
    <div class="flex justify-end">
        <div class="w-500">
            <label>
                <span>日期选择：</span>

                <el-date-picker v-model="dateRange"
                                type="daterange"
                                start-placeholder="请选择开始日期"
                                end-placeholder="请选择结束日期"
                />
            </label>
        </div>
    </div>

    <SearchTable v-bind="gridOptions"
                 v-model:pager="tablePage"
                 :loading="isTableLoading"
                 :data="tableData"
                 class="mt-20"
    >
        <template #avatar="{ row }">
            <img :src="row.avatar"
                 alt=""
                 width="40"
                 height="40"
                 class="m-auto"
            >
        </template>

        <template #operation="{ row }">
            <el-button text
                       class="!p-4 !text-#409EFF"
                       @click="onCheckDetailBtnClick(row)"
            >
                查看
            </el-button>
        </template>
    </SearchTable>

    <RecordsDetail v-model:visible="showRecordsDetail" />
</template>

<style scoped>

</style>
